<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '详情页',
  },
}
</route>

<template>
  <view class="flex flex-col h-100vh">
    <geek-header title="详情页" placeholder></geek-header>
    <scroll-view scroll-y class="flex-1 overflow-auto">
      <view class="flex-col px-30rpx">
        <view class="text-#10142F font-bold text-44rpx mt-50rpx">项王三期大门口</view>

        <view class="flex items-center mt-22rpx">
          <view class="w-64rpx h-44rpx flex items-center justify-center mr-10rpx bg-active">
            <image
              class="w-24rpx h-24rpx"
              src="@/static/images/ic_echarging.png"
              mode="scaleToFill"
            />
          </view>

          <view class="w-64rpx h-44rpx flex items-center justify-center bg-active">
            <image
              class="w-24rpx h-24rpx"
              src="@/static/images/ic_wifi_active.png"
              mode="scaleToFill"
            />
          </view>
        </view>

        <view class="bg-#E9EBED h-1rpx mt-28rpx"></view>

        <view class="flex items-center mt-28rpx pos-relative">
          <view class="text-#6D7375 text-24rpx">
            点位位置：泗阳县淮海路与桃源路交叉口大润发对面
          </view>
          <image
            class="w-32rpx h-32rpx pos-absolute right-20rpx"
            src="@/static/images/ic_location.png"
            mode="scaleToFill"
          />
        </view>

        <view class="bg-#E9EBED h-1rpx mt-28rpx"></view>

        <view class="text-#6D7375 text-24rpx mt-28rpx">现场照片</view>

        <view class="flex items-center mt-28rpx">
          <image
            v-for="(item, index) in imgs"
            :key="index"
            class="w-200rpx h-200rpx rd-16rpx bg-#377BF4"
            src="@/static/images/ic_map_dot.png"
            mode="scaleToFill"
          />
        </view>

        <view class="bg-#E9EBED h-1rpx mt-30rpx"></view>

        <view class="flex items-center mt-28rpx">
          <view class="w-50% text-#10142F text-24rpx">网络状态：有网络</view>
          <view class="w-50% text-#10142F text-24rpx">安装方式：壁装</view>
        </view>

        <view class="flex items-center mt-28rpx">
          <view class="w-50% text-#10142F text-24rpx">取电状态：有电</view>
          <view class="w-50% text-#10142F text-24rpx">镜头方向：东</view>
        </view>

        <view class="bg-#E9EBED h-1rpx mt-30rpx"></view>

        <view v-for="(item, index) in devices" :key="index" class="flex items-center mt-28rpx">
          <view class="w-50% text-#10142F text-24rpx">设备类型：球机摄像头</view>
          <view class="w-50% text-#10142F text-24rpx">设备数量：2 个</view>
        </view>

        <view class="bg-#E9EBED h-1rpx mt-32rpx"></view>

        <view class="text-#10142F text-24rpx mt-32rpx">添加时间：2025-10-02 12:09</view>
      </view>
    </scroll-view>

    <view class="h-100rpx mb-30rpx flex items-center justify-center px-30rpx">
      <view
        class="h-88rpx w-40% rd-8rpx border-2rpx border-solid mr-10rpx text-#377BF4 text-28rpx font-bold flex items-center justify-center"
      >
        删除
      </view>
      <view
        class="h-88rpx w-60% rd-8rpx border-2rpx border-solid ml-10rpx bg-#377BF4 text-white text-28rpx font-bold flex items-center justify-center"
      >
        编辑
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
const imgs = ref(['', ''])

const devices = ref([{}, {}])
</script>

<style lang="scss" scoped>
scroll-view ::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
</style>
